<template>
  <el-dialog
    title="选择人员"
    :visible="copyVisible"
    width="30%"
    append-to-body
    :close-on-click-modal="false"
    @close="handleCancel"
  >
    <div class="search-tree">
      <el-input
        v-model="filterText"
        suffix-icon="el-icon-search"
        placeholder="搜索"
      />
    </div>
    <el-tree
      ref="tree"
      style="height:480px;overflow-y: auto;"
      :data="memberList"
      show-checkbox
      node-key="id"
      :filter-node-method="filterNode"
      highlight-current
      :props="defaultProps"
      check-strictly
    />
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleOk">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import { getOldMemberList } from '@/api/approve'
export default {
  name: 'UserDialog',
  props: ['showCopyModal', 'copyVisible', 'companyId'],
  data() {
    return {
      filterText: '',
      memberList: [],
      defaultProps: {
        children: 'childList',
        label: 'name',
        disabled: (data, node) => {
          if (data.type != 2) {
            return true
          }
        }
      }
    }
  },
  computed: {
    ...mapState({
      selectedList: state => state.user.selectedList,
      status: state => state.user.status
    })
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    this.getMemberList()
  },
  methods: {
    ...mapMutations('user', ['setCheckedList', 'setStatus', 'clearSelectedList', 'setSelectedList', 'setMaxNum']),
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    getMemberList() {
      getOldMemberList({
        activeState: 0,
        allShowView: 0,
        companyId: this.companyId,
        jobStatus: 0,
        operationalPermissions: 0,
        returnType: 0
      }).then(res => {
        this.memberList = this.handleOptions(res.data)
        // this.checkedKeys = this.selectedList[`${this.status}`]?.map(item => item.staffId)
        const checkedKeys = this.selectedList[`${this.status}`] ? this.selectedList[`${this.status}`].map(item => item.staffId) : []
        if (checkedKeys.length > 0) {
          this.$refs.tree.setCheckedKeys(checkedKeys)
        }
      })
    },
    handleOptions(item) {
      const that = this
      function handlePushText(item) {
        for (let i = 0, len = item.length; i < len; i++) {
          const childList = item[i].childList
          item[i].staffId = item[i].id
          item[i].staffName = item[i].name
          item[i].companyId = item[i].parentId
          if (item[i].type !== 2) {
            item[i].checkable = false
            if (that.maxNum === 1) {
              item[i].disabled = true
            }
          }
          if (childList && childList.length > 0) {
            handlePushText(childList)
          }
        }
        return item
      }
      return handlePushText(item)
    },
    handleOk() {
      this.$emit('showCopyModal')
      const data = this.$refs.tree.getCheckedNodes()
      this.setSelectedList(data)
    },
    handleCancel() {
      this.$emit('showCopyModal')
    }
  }
}
</script>
